<template>
  <div>
    <TopNav title="我的跟帖" />
    <div class="list">
      <!-- <div class="item">
        <div class="date">2019-10-10</div>
        <div class="content">阿信是张信哲吗?张信哲是不是张学友的弟弟?</div>
        <div class="postTitle">原文:阿信分享</div>
      </div>-->
      <div class="item" v-for="(item,index) in list" :key="index">
        <div class="date">{{item.create_date.split('T')[0]}}</div>
        <div class="content">
          <div class="parent" v-if="item.parent">
            <div class="username">回复:{{item.parent.user.nickname}}</div>
            <div class="parentContent">{{item.parent.content}}</div>
          </div>
          {{item.content}}
        </div>
        <div class="postTitle">原文:{{item.post.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
export default {
  data() {
    return {
      list: []
    };
  },
  components: {
    TopNav
  },
  mounted() {
    this.$axios({
      url: "/user_comments",
      mothed: "GET"
    }).then(res => {
      console.log(res.data);
      this.list = res.data.data;
    });
  }
};
</script>

<style lang='less' scoped>
.item {
  padding: 2.778vw 5.556vw;
  border-bottom: 1px solid #e4e4e4;
  .date {
    font-size: 3.889vw;
    color: #888;
  }
  .content {
    font-size: 4.444vw;
    color: #333;
    padding: 3.889vw 0;
  }
  .postTitle {
    color: #888;
    font-size: 3.889vw;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .parent {
    background-color: #e4e4e4;
    padding: 2.778vw;
    color: #888;
    margin-bottom: 2.778vw;
    .username {
      font-size: 3.889vw;
    }
    .parentContent {
      margin-top: 2.778vw;
      font-size: 4.444vw;
    }
  }
}
</style>